<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>能读json的小插件</title>
    <link href="style/css/treemenu.css" rel="stylesheet" type="text/css">
    <style>
    .inputTree {
        padding: 0px;
        margin: 0px;
        border: 1px solid #888;
        width: 400px;
        height: 30px;
        font-size: 20px;
        line-height: 30px;
    }
    </style>
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/jquery.treemenu.js"></script>
    <script>
    $(function() {
        var json = [{
            "name": "一级列表01",
            "level": "1",
            "code": "1",
            "child": [{
                "name": "二级列表01-01",
                "code": "11",
                "parentCode": "1",
                "child": [{
                    "name": "三级列表01-01-01",
                    "code": "111",
                    "icon": "",
                    "parentCode": "11",
                    "child": []
                }]
            }, {
                "name": "二级列表01-02",
                "code": "12",
                "parentCode": "1",
                "child": [{
                    "name": "三级列表01-02-01",
                    "code": "121",
                    "parentCode": "12",
                    "child": []
                }]
            }]
        }, {
            "name": "一级列表02",
            "level": "1",
            "code": "2",
            "child": [{
                "name": "二级列表02-01",
                "code": "21",
                "parentCode": "2",
                "child": [{
                    "name": "三级列表02-01-01",
                    "code": "221",
                    "parentCode": "21",
                    "child": []
                }]
            }]
        }, {
            "name": "一级列表03",
            "level": "1",
            "code": "3",
            "child": [{
                "name": "二级列表03-01",
                "code": "31",
                "parentCode": "3",
                "child": [{
                    "name": "三级列表03-01-01",
                    "code": "331",
                    "parentCode": "31",
                    "child": [{
                        "name": "四级列表03-01-01-01",
                        "code": "3331",
                        "parentCode": "331",
                        "child": []
                    }]
                }]
            }]
        }];

        createTree(json);


    });

    function createTree(json) {
        $(".tree").TreeMenu({
            putJSON: json,
            showTree: false, //是否显示树表tree
            showCheckbox: false, //是否显示checkbox，是
            chooseStyle: 'treemenu', //选择tree的主体样式
            togglerDelay: 300, //列表的展开速度
            listState: false, //列表的状态是否打开，是
            onlyUnfold: false //列表的一开多关是否打开，打开
        });
    }
    </script>
</head>

<body>
    <input type="text" class="inputTree" placeholder="点击出现tree">
    <ul class="tree" id="myTree"></ul>
    <!-- <ul class="tree" id="myTree">
        <li>
            <a href="#">htmlcss</a>
            <ul>
                <li>
                    <a href="#">css</a></li>
                <li>
                    <a href="#">less</a></li>
                <li>
                    <a href="#">sass</a></li>
            </ul>
        </li>
        <li>
            <a href="#">javascript</a>
            <ul>
                <li>
                    <a href="#">jQuery</a>
                    <ul>
                        <li>
                            <a href="#">jQuery</a></li>
                        <li>
                            <a href="#">augular.js </a></li>
                        <li>
                            <a href="#">bootstrap </a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">JavaScript</a>
                    <ul>
                        <li>
                            <a href="#ui">ui</a>
                            <ul>
                                <li>
                                    <a href="#">easyUI </a></li>
                                <li>
                                    <a href="#">jQueryUI</a></li>
                                <li>
                                    <a href="#">extJS</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">React.js</a></li>
                        <li>
                            <a href="#">create.js</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"> three.js</a></li>
            </ul>
        </li>
        <li>
            <a href="#">dojo</a>
            <ul>
                <li>
                    <a href="#">php</a></li>
                <li>
                    <a href="#"> ajax.jsonp</a></li>
                <li>
                    <a href="#">node.js</a>
                    <ul>
                        <li>
                            <a href="#">apicloud</a></li>
                        <li>
                            <a href="#">ionic</a></li>
                        <li>
                            <a href="#">MUI</a></li>
                    </ul>
                <li>
            </ul>
        </li>
    </ul> -->
</body>

</html>
